<template>
	<view>
		<view class="center">
			<view class="add-form-item a-center border-b-1-91">
				<view class="font-28 black50-zt line-h100 label"><text class="jdhong-zt">*</text><text>姓名</text></view>
				<view class="form-input"><input v-model="formData.name" placeholder="请输入姓名" placeholder-class="placeholder" class="line-h100 font-26"/></view>
			</view>
			<view class="add-form-item a-center border-b-1-91">
				<view class="font-28 black50-zt line-h100 label"><text class="jdhong-zt">*</text><text>手机号</text></view>
				<view class="form-input"><input v-model="formData.tel" placeholder="请输入手机号" placeholder-class="placeholder" class="line-h100 font-26"/></view>
			</view>
			<view class="add-form-item a-center border-b-1-91">
				<view class="font-28 black50-zt line-h100 label"><text class="jdhong-zt">*</text><text>所在区域</text></view>
				<view class="form-input a-center j-sp" @tap="getLocationX">
					<view class="line-h100 position font-26">
						<input v-model="formData.city+formData.district+formData.address" disabled="true" placeholder="请授权定位所在地区" placeholder-class="placeholder" class="line-h100 font-26"/>
					</view>
					<view class="icon-position main-zt font-32"></view>
				</view>
			</view>
			<view class="add-form-item a-center border-b-1-91" v-if="formData.area!=''">
				<view class="font-28 black50-zt line-h100 label"><text class="jdhong-zt">*</text><text>所属街道</text></view>
				<view class="form-input">
					<picker  :range="list" range-key="fullname" :value="index"  @change="regionchange">
						<view class="uni-input">{{list[index].fullname}}</view>
					</picker>
				</view>
			</view>
			<view class="add-form-item a-center border-b-1-91">
				<view class="font-28 black50-zt line-h100 label"><text class="jdhong-zt">*</text><text>详细地址</text></view>
				<view class="form-input"><input v-model="formData.house_number" placeholder="请输入详细地址" placeholder-class="placeholder" class="line-h100 font-26"/></view>
			</view>
			<!-- <view class="add-form-area">
				<view class="font-28 font-w-b black20-zt line-h100"><text class="jdhong-zt">*</text><text>住宅面积</text></view>
				<view class="a-center flex-wrap">
					<view class="item font-26 line-h55" v-for="(item,index) in residential" :key="index" :class="{'active':item.is}" @tap="selectionRes(item.id)">{{item.name}}</view>
				</view>
			</view> -->
		</view>
		<!-- 保存按钮 -->
		<view class="center border-r main-bj white-zt font-30 text-center line-h90  position-fixed btn_bottom" @tap="btnOk">保存</view>
	</view>
</template>

<script>
	import QQMapWX from "../../common/qqmap-wx-jssdk.min.js"
	const chooseLocation = requirePlugin('chooseLocation');
	// 腾讯地图Api
	const qqmapsdk = new QQMapWX({
		key: 'BJGBZ-CICCB-SWMUS-JW233-R7B2Z-TYBUX'  ,//这里填写自己申请的key
	});
	export default {
		data() {
			return {
				formData:{
					id:undefined,
					aid:1,
					mid:undefined,
					name:'',
					tel:'',
					province:'',
					city:'',
					district:'',
					area:'',
					address:'',
					house_number:'',
					latitude:undefined,
					longitude:undefined,
					residential_area:1,
					isdefault:0,
					district_code:undefined
				},
				residential:[
					{name:"80㎡以内",is:false,id:1},
					{name:"80-99㎡",is:false,id:2},
					{name:"100-119㎡",is:false,id:3},
					{name:"120-139㎡",is:false,id:4},
					{name:"140-159㎡",is:false,id:5},
					{name:"160㎡以上",is:false,id:6}
				],
				adcode:undefined,
				list:[],
				index:0
			}
		},
		onLoad(e) {
			this.formData.latitude=parseFloat(e.latitude)
			this.formData.longitude=parseFloat(e.longitude)
			if(parseFloat(e.id)>0){
				this.formData.id=parseFloat(e.id)
				this.GetAddress()
			}
			//开启分享
			wx.showShareMenu({
				withShareTicket:true,
				menus:["shareAppMessage","shareTimeline"]
			})
		},
		onShow() {
			this.formData.mid=parseFloat(this.$user.state.userId)
			const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
			if (location) {
				this.formData.province = location.province
				this.formData.city = location.city
				this.formData.district = location.district
				this.formData.address = location.name
				this.formData.latitude = location.latitude.toString()
				this.formData.longitude = location.longitude.toString()
				this.getAuthorize()
			}
		},
		onUnload() {
			// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
			chooseLocation.setLocation(null);
		},
		//设置分享好友的内容
		onShareAppMessage(res) {
			if (res.from=="button"){
				console.log(res.target)
			}
			return {
				title:"鑫意到家",
				path: '/pages/index/index?rid=',
				desc:"鑫意到家 · 洁新留下！",
				imageUrl:"../../static/202310131154405365.png"
			}
		},
		//分享朋友圈
		onShareTimeline(res) {
			return {
				title: '鑫意到家 · 洁新留下！',
				type: 0,
				summary: "鑫意到家 · 洁新留下！",
			}
		},
		methods: {
			//保存
			async btnOk(){
				if(this.formData.name==""){
					uni.showToast({
						icon:"none",
						title:"姓名不能为空！",
						duration:2000
					})
					return
				}
				if(this.formData.tel==""){
					uni.showToast({
						icon:"none",
						title:"手机号不能为空！",
						duration:2000
					})
					return
				}
				if(this.formData.district==""){
					uni.showToast({
						icon:"none",
						title:"所在区域不能为空！",
						duration:2000
					})
					return
				}
				if(this.formData.house_number==""){
					uni.showToast({
						icon:"none",
						title:"详细地址不能为空！",
						duration:2000
					})
					return
				}
				if(this.formData.residential_area<1){
					uni.showToast({
						icon:"none",
						title:"住宅面积不能为空！",
						duration:2000
					})
					return
				}
				await this.$api.AddressAdd(this.formData).then(res=>{
					if(res.code==0){
						uni.showToast({
							icon:"none",
							title:"保存成功！",
							duration:2000
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},2000)
					}
				})
			},
			//获取用户地址
			async GetAddress(){
				const one={
					aid:38,
					mid:parseFloat(this.$user.state.userId),
					id:this.formData.id,
					page:1,
					limit:1000
				}
				await this.$api.GetAddressList(one).then(res=>{
					if(res.data.count>0){
						this.formData=res.data.list[0]
						this.adcode=res.data.list[0].district_code
						if(this.adcode>0){
							this.getStreet()
						}
						this.residential.forEach(item=>{
							if(item.id==res.data.list[0].residential_area){
								item.is=true
							}
						})
					}
				})
			},
			//选择面积
			selectionRes(e){
				this.residential.forEach(item=>{
					if(item.id==e){
						item.is=true
						this.formData.residential_area=item.id
					}else{
						item.is=false
					}
				})
			},
			//监听选择
			regionchange(e) {
				console.log(e)
				const value = e.detail.value
				this.index=parseFloat(value)
				for(let i=0;i<this.list.length;i++){
					if(i==this.index){
						this.formData.area = this.list[i].fullname
					}
				}
			},
			//调用腾讯小程序插件
			getLocationX(){
				const key = "BJGBZ-CICCB-SWMUS-JW233-R7B2Z-TYBUX"; //使用在腾讯位置服务申请的key
				const referer = '鑫意到家 · 洁新留下！'; //调用插件的app的名称
				const location = JSON.stringify({
					latitude: parseFloat(this.formData.latitude) || this.location.latitude,
					longitude: parseFloat(this.formData.longitude) || this.location.longitude
				});
				const category = '生活服务,娱乐休闲';
				uni.navigateTo({
					url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' +
						location + '&category=' + category
				});
			},
			// 3、获取微信定位授权方法
			getAuthorize () {
				uni.authorize({
					scope: 'scope.userLocation',
					success: (res) => {
						this.getLocation()
					},
					fail: (err) => {
						uni.showModal({
							content: '需要授权位置信息',
							confirmText: '确认授权'
						}).then(res => {
							if (res['confirm']) {
								uni.openSetting({
									success: res => {
										if (res.authSetting['scope.userLocation']) {
											uni.showToast({
												title: '授权成功',
												icon: 'none'
											})
										} else {
											uni.showToast({
												title: '授权失败',
												icon: 'none'
											})
										}
										this.getLocation()
									}
								})
							}
							if (res['cancel']) {
								// 取消授权
								this.getLocation()
							}
						})
					}
				})
			},
			// 4、开始获取定位方法
			getLocation () {
				qqmapsdk.reverseGeocoder({
					location: {
					  latitude: this.formData.latitude,
					  longitude: this.formData.longitude
					},
					success: (val) => {
						this.adcode=val.result.ad_info.adcode
						this.formData.district_code=val.result.ad_info.adcode
						this.formData.area=val.result.address_reference.town.title
						this.getStreet()
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			//获取所有的街道
			getStreet(){
				qqmapsdk.getDistrictByCityId({
					id:this.adcode,
					success:(val)=>{
						console.log(val)
						this.list=val.result[0]
						for(let i=0;i<this.list.length;i++){
							if(this.list[i].fullname==this.formData.area){
								this.index=i
							}
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.placeholder{
		color: #cfcfcf;
		font-size: 26rpx;
	}
	.add-form-item{
		.label{
			width: 170rpx;
		}
		.form-input{
			width: 520rpx;
			input{
				width: 100%;
				line-height: 80rpx;
			}
			.position{
				width: 450rpx;
			}
		}
	}
	.add-form-area{
		.item{
			padding: 0 26rpx;
			background-color: #f8f9fd;
			color: #cfcfcf;
			border-radius: 15rpx;
			margin-right: 20rpx;
			margin-bottom: 25rpx;
		}
		.active{
			background-color: #7ab13d;
			color: #ffffff;
		}
	}
	
	.btn_bottom{
		bottom: 80rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
